<template>
  <div class="question">
    <img id="question-logo" src="http://localhost/userAvatar/timg3.png" alt="Stage-logo" />
    <p id="questionnaire-name">{{questionnaire.Title}}</p>
    <div class="question-content">
      <Menu id="question-menu" mode="horizontal" :theme="theme1" active-name="1">
        <a class="csshub-btn" href="#">
          <span data-hover="Stage问卷">问卷详情</span>
        </a>
      </Menu>
  
      <Row>
        <Col span="20" class="question-col" style="margin-top: 2.5%" v-for="item in questionnaire.ChoiceQuestions" :key="item.QuestionId">
        <Card v-if="item.Type==true">
          <p slot="title">题目：{{item.Title}}
            <Tag style="float:right" color="blue">单选</Tag>
          </p>
          <Radio-group v-model="item.AnswerOption">
            <div v-for="op in item.Options">
              <Radio :label="op.OptionContent"></Radio>
            </div>
          </Radio-group>
        </Card>
        <Card v-else>
          <p slot="title">题目：{{item.Title}}
            <Tag style="float:right" color="green">多选</Tag>
          </p>
          <Checkbox-group v-model="item.AnswerOptions">
            <div v-for="op in item.Options">
              <Checkbox :label="op.OptionContent"></Checkbox>
            </div>
          </Checkbox-group>
        </Card>
        </Col>
        <Col span="20" class="question-col" v-for="item in questionnaire.Completions" :key="item.Id">
        <Card>
          <p slot="title">题目：{{item.Title}}？
            <Tag style="float:right" color="yellow">填空题</Tag>
          </p>
          <Input v-model="item.Answer" size="large" placeholder="请输入答案"></Input>
        </Card>
        </Col>
      </Row>
      <Button id="sub-button" size="large"  shape="circle" @click="handleSubmit()" >提交</Button>
      <br/>
      <br/>
    </div>
    <div id="myfooter">
      <p>Stage was made with by
        <Icon type="ios-heart-outline" color="pink"></Icon> the Rosagusa</p>
      <Back-top></Back-top>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      theme1: 'dark',
      questionnaire: {}
    }
  },
  mounted: function () {
    var _this = this
    axios.get('http://localhost:7952/api/Questionnaire/GetQuestionAnswerById/' + _this.$route.params.id)
  .then(function (response) {
    _this.questionnaire = response.data
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })
  },
  methods: {
    handleSubmit (name) {
      var _this = this
      var flag = true
      this.questionnaire.Completions.map(c => {
        if (c.Answer === null) {
          flag = false
        }
      })
      this.questionnaire.ChoiceQuestions.map(c => {
        if (c.Type) {
          if (c.AnswerOption === null) {
            flag = false
          }
        } else {
          if (c.AnswerOptions.length === 0) {
            flag = false
          }
        }
      })
      if (flag) {
        axios.post('http://localhost:7952/api/Questionnaire/SubmitAnswer/',
          _this.questionnaire
        )
        .then(function (response) {
          if (response.data == null) {
            _this.$Message.error('提交成功!')
          } else {
            _this.$Message.success('提交失败!')
            setTimeout(function () {
              window.location.href = 'http://localhost:8091'
            }, 3000)
          }
        })
        .catch(function () {
          _this.$Message.error('提交失败!')
        })
      } else {
        this.$Message.error('问卷未完成，请核实您的填写!')
      }
    }
  }
}
</script>
<style>
#sub-button{
  margin-left:43%;
}
.question-col{
  margin: 8%;
  margin-bottom: 2%;
  margin-top: 2%;
}
#questionnaire-name{
    font-weight: 900;
    color: #fff !important;
    font-size: 60px;
    font-family: LiSu;
    text-align: center;
}
#question-menu{
  background-color: #333;
    z-index: 99999999;
    width: 100%;
}
  .question{
      min-height: 750px;
      background: transparent;
      background-color: gainsboro;
  }
  #question-logo{
    margin-top:1.5%;
    margin-left: 34%;
  }
  .question-content{
    width: 55%;
    margin-left: 23%;
    min-height: 800px;
    background-color: white;
  }
</style>
